<template>
  <view class="container d-flex flex-column">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="back" @click="navigateBack">
        <text class="iconfont icon-return"></text>
      </view>
      <view class="title">我的钱包</view>
      <view class="empty"></view>
    </view>

    <view class="content-container">
      <view class="account-tabs">
        <view
          v-for="(tab, index) in balance"
          :key="tab.id"
          class="tab-item"
          :class="{ active: currentTab === index }"
          @click="switchTab(index)"
        >
          <view class="tab-text">{{ tab.account_name }}</view>
          <view
            class="tab-underline"
            :class="{ active: currentTab === index }"
          ></view>
        </view>
      </view>

      <view class="account-card">
        <view class="balance-info">
          <div class="label">账户余额</div>
          <text class="amount"
            >¥{{
              currentAccount && currentAccount.balance
                ? currentAccount.balance
                : "0.00"
            }}</text
          >
        </view>
        <view class="member-qr-code" @tap="memberCode(currentAccount.qrcode)" >
          <image src="/static/images/mine/hym-2.png" mode="aspectFit" class="qr-code-icon"></image>
        </view>
      </view>

      <!-- 账单分割线 -->
      <view class="bill-divider">
        <text>—— 账单 ——</text>
      </view>

      <!-- 加载状态 -->
      <view class="loading" v-if="loading">
        <text>加载中...</text>
      </view>

      <!-- 错误提示 -->
      <view class="error" v-if="error">
        <text>{{ error }}</text>
      </view>

      <!-- 账单列表 -->
      <view class="bill-list">
        <view v-for="(bill, index) in billList" :key="index" class="bill-item">
          <view class="bill-header" @click="toggleExpand(index)">
            <view class="bill-info">
              <text class="bill-type">{{ bill.view.month }}</text>
            </view>
            <view class="bill-summary">
              <div>收入: ¥{{ bill.view.income }}</div>
              <div>支出: ¥{{ bill.view.pay_out }}</div>
            </view>
          </view>

          <!-- 展开的详细记录 -->
          <view class="bill-details" v-if="expandedIndexes.includes(index) && bill.list && bill.list.length > 0">
            <view v-for="(item, i) in bill.list" :key="i" class="detail-item">
              <view class="detail-left">
                <div class="detail-title">{{ item.change_title }}</div>
                <text class="detail-time">{{ item.create_time }}</text>
              </view>
              <view class="detail-right">
                <div class="detail-title">{{ item.money }}</div>
                <!-- <text class="detail-time">{{ item.create_time }}</text> -->
              </view>
            </view>
          </view>
        </view>
        <view class="empty-bill" v-if="billList.length === 0">
          暂无账单数据
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      balance: [],
      currentTab: 0,
      billList: [],
      loading: false,
      error: "",
      expandedIndexes: [],
    };
  },
  onLoad(option) {
    this.fetchAccountList(option.doctor_id);
  },
  computed: {
    currentAccount() {
      return this.balance[this.currentTab] || null;
    },
  },
  methods: {
    navigateBack() {
      uni.navigateBack({ delta: 1 });
    },
    switchTab(index) {
      if (this.currentTab === index) return;
      this.currentTab = index;
      this.fetchBillList();
    },
    async fetchAccountList(doctor_id) {
      this.loading = true;
      try {
        let result = await this.$u.api.balanceInfo({ doctor_id });
        this.balance = result || [];
        this.fetchBillList();
      } catch (error) {
        this.error = "获取账户列表失败";
      } finally {
        this.loading = false;
      }
    },
    async fetchBillList() {
      if (!this.currentAccount) return;
      this.loading = true;
      try {
        let res = await this.$u.api.balanceList({
          account_code: this.currentAccount.account_code,
        });
        this.billList = res.list || [];
      } catch (err) {
        this.error = "获取账单失败";
      } finally {
        this.loading = false;
      }
    },
    memberCode(qrcode) {
      const fullUrl = qrcode
      uni.navigateTo({
        url: `/pages/components/pages/mine/member-code?qrcode=${encodeURIComponent(fullUrl)}`
      })
    },
    toggleExpand(index) {
      const idx = this.expandedIndexes.indexOf(index);
      if (idx > -1) {
        this.expandedIndexes.splice(idx, 1);
      } else {
        this.expandedIndexes.push(index);
      }
    },
  },
};
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  font-size: 28rpx;
  color: #333;
}
.content-container {
  /* padding: 60rpx 30rpx; */
}
.header {
  display: flex;
  align-items: center;
  height: 300rpx;
  background-color: #289365;
  color: #fff;
  padding: 0 30rpx;
}
.back {
  width: 60rpx;
}
.title {
  flex: 1;
  text-align: center;
  font-size: 34rpx;
  font-weight: bold;
}
.account-tabs {
  display: flex;
  justify-content: center;
  margin: 0 0 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 10rpx 0;
}
.tab-item {
  margin: 0 40rpx;
  padding: 15rpx 0;
}
.tab-text {
  font-size: 32rpx;
  color: #999;
}
.tab-item.active .tab-text {
  color: #289365;
  font-weight: bold;
}
.tab-underline {
  height: 6rpx;
  width: 0;
}
.tab-underline.active {
  width: 60rpx;
  background-color: #289365;
  margin-top: 8rpx;
}
.account-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 40rpx 30rpx;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
}
.balance-info {
  flex: 1;
}
.label {
  font-size: 28rpx;
  color: #666;
}
.amount {
  font-size: 52rpx;
  color: #289365;
  font-weight: bold;
}
.bill-divider {
  text-align: center;
  margin: 30rpx 0;
  color: #999;
}
.loading,
.error {
  text-align: center;
  padding: 50rpx 0;
  color: #666;
}
.error {
  color: #f33;
}
.bill-list {
  background-color: #fff;
  border-radius: 16rpx;
}
.bill-item {
  padding: 0;
  border-bottom: 2rpx solid #f5f5f5;
  margin-bottom: 20rpx;
}
.bill-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 30rpx;
}
.bill-info {
  flex: 1;
}
.bill-type {
  font-size: 32rpx;
  font-weight: bold;
}
.bill-summary {
  /* flex: 1;
  display: flex;
  justify-content: space-around; */
  color: #999;
}
.bill-details {
  background-color: #f9f9f9;
  padding: 20rpx 30rpx;
}
.detail-item {
  display: flex;
  justify-content: space-between;
  padding: 15rpx 0;
}
.detail-left {
  flex: 1;
}
.detail-title {
  font-size: 28rpx;
}
.detail-time {
  font-size: 24rpx;
  color: #999;
}
.detail-right {
  width: 200rpx;
  text-align: right;
}
.detail-amount {
  font-size: 28rpx;
  font-weight: bold;
}
.empty-bill {
  text-align: center;
  padding: 80rpx 0;
  color: #999;
}
.member-qr-code {
  margin-left: 10rpx;
}

.qr-code-icon {
  width: 50rpx;
  height: 50rpx;
}
</style>
